{% extends base %}

{% block body %}

    {% init msg_list = [] %}

    <div class="row">
        <input type="text" class="nav-search-input" placeholder="搜索标签" onchange="onSearchInputChange(this)"/>
        <button class="nav-search-btn btn-default">
            <i class="fa fa-search"></i>
        </button>
    </div>
   
   <div class="card top-offset-1">
       
       <a class="list-item empty-item">&lt;无匹配标签&gt;</a>

       {% for msg in msg_list %}
            <a onclick="on_msg_click(this);" class="list-item topic-item">{{msg.content}}</a>
       {% end %}

    </div>

    <script type="text/javascript">

        $(function () {

            function touchTopic(topic) {
                var params = {"key": topic};
                $.post("/message/touch", params, function (resp) {
                    console.log(resp);
                }).fail(function (error) {
                    console.error(error);
                })
            }

            function createTopicText(topic) {
                if (topic.Get(0) == '#' && topic.Get(-1) == '#') {
                    return topic;
                }

                if (topic.Get(0) == '《' && topic.Get(-1) == '》') {
                    return topic;
                }
                
                return '#' + topic + '#';
            }

    
            window.on_msg_click = function (target) {
                var topic = $(target).text();

                // 将话题置顶
                touchTopic(topic);

                var topicText = createTopicText(topic);

                // 发布选择消息的事件
                var msg = {type: "message.topic.selected", __value: topicText};

                // iframe中通知父级节点更新
                window.parent.postMessage(JSON.stringify(msg), "*");
            }

            function doSearchTopic(inputText) {
                var showCount = 0;

                $(".empty-item").hide();
                
                $(".topic-item").each(function (index, element) {
                    var text = $(element).text();
                    if (text.indexOf(inputText) < 0) {
                        $(element).hide();
                    } else {
                        $(element).show();
                        showCount++;
                    }
                });

                if (showCount == 0) {
                    $(".empty-item").show();
                }
            }

            $(".nav-search-input").on("keyup", function (e) {
                var inputText = $(e.target).val();
                doSearchTopic(inputText);
            });

            doSearchTopic("");
        })

    </script>

{% end %}